<template>
<Form class="content" :labelWidth="140">
<Steps :current="vCurrent" direction="vertical" style="overflow-y: auto;height:95%;">
    <Step title="基本配置" icon="md-list-box" status="process" @click.native="vCurrent=1">
        <template slot="content">
            <FieldItem v-model="curProperty[category].useApprove"
                :config="{type: 'check', clearable: true}" :formItemProps="{label: '启用审批流'}"/>
            <template v-if="curProperty[category].useApprove">
                <FieldItem v-model="curProperty[category].nodeId" v-if="!isUserConfig"
                    :config="{type: 'text', clearable: true}"
                    :formItemProps="{label: '审批模型的nodeId'}"/>
                <FieldItem v-model="curProperty[category].cancelApproveMessage" v-if="!isUserConfig"
                    :config="{type: 'textarea', clearable: true, placeholder: '查询到存在xx单据，请删除后再反审'}"
                    :formItemProps="{label: '反审校验不通过的提示文案'}"/>
                <FieldItem v-model="curProperty[category].cancelRoleName"
                    :config="{type: 'multiSelect', options: roleOptions, clearable: true}"
                    :formItemProps="{label: '有反审权限的角色'}"/>
                <FieldItem v-model="curProperty[category].hideCancelApprove"
                    :config="{type: 'check'}" :formItemProps="{label: '隐藏反审按钮'}"/>
                <!-- <FieldItem v-model="curProperty[category].approveMessage"
                    :config="{type: 'textarea', clearable: true, placeholder: '出库数量超过了订单量，请核查修改后再审核'}"
                    :formItemProps="{label: '终审校验不通过的提示文案'}"/> -->
            </template>
        </template>
    </Step>
    <template v-if="curProperty[category].useApprove">
    <Step title="审批控制" icon="md-list-box" status="process" 
        @click.native="vCurrent=2">
        <template slot="content">
            <FieldItem v-model="curProperty[category].showApproveList"
                :config="{type: 'check', clearable: true}" :formItemProps="{label: '显示审批列表按钮'}"/>
            <FieldItem v-model="curProperty[category].modalShowFormDetail"
                :config="{type: 'check', clearable: true}" :formItemProps="{label: '审批弹窗显示详情'}"/>
            <FieldItem v-model="curProperty[category].approveCheckDetails" v-if="!isUserConfig"
                :config="{type: 'check', clearable: true}" :formItemProps="{label: '明细记录为空审核不通过'}"/>
            <FieldItem v-model="curProperty[category].cancelApproveClearDate" v-if="!isUserConfig"
                :config="{type: 'check', clearable: true}" :formItemProps="{label: '反审时清空审批时间'}"/>
            <FieldItem v-model="curProperty[category].approveDisableFilter" v-if="!isUserConfig"
                :config="{type: 'text', clearable: true, placeholder: 'demo: {{curRecord.status == 3}}'}"
                :formItemProps="{label: '审批按钮置灰的条件'}"/>
            <FieldItem v-model="curProperty[category].cancelApproveDisableFilter" v-if="!isUserConfig"
                :config="{type: 'text', clearable: true, placeholder: 'demo: {{curRecord.status == 3}}'}"
                :formItemProps="{label: '反审按钮置灰的条件'}"/>
            <FieldItem v-model="curProperty[category].approveExtraFields" v-if="!isUserConfig"
                :config="{type: 'textarea', clearable: true, placeholder: approveFieldsPlaceHolder}"
                :formItemProps="{label: '审批弹窗追加的字段'}"/>
        </template>
    </Step>
    <Step title="审批流程" icon="md-done-all" status="process"
        @click.native="vCurrent=3">
        <cfgEditTable slot="content" :value="curProperty[category].approveList" :columns="columns"/>
    </Step>
    </template>
</Steps>
</Form>
</template>

<script>
import storeVar from '../../mixins/storeVar';
import {mapState} from "vuex";

export default {
    name: 'approve',
    mixins: [storeVar],
    data () {
        return {
            vCurrent: 0,
            actionCascaderData: [],
            eventMap: {},
            methodOptions: this.tools.getOptions(['queryData', 'setData', 'setVisible', 'updateData']),
            approveFieldsPlaceHolder: '[{"title": "字段名", "key": "key1", "type": "text", "disabled": true}]',
            roleList: [
                {label: '角色1', value: '角色1'},
                {label: '角色2', value: '角色2'},
                {label: '角色3', value: '角色3'},
                {label: '角色4', value: '角色4'},
            ]
        }
    },
    props: {
        category: {
            default: () => {
                return 'approve';
            }
        },
        isUserConfig: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState('admin/layout',[
            'role'
        ]),
        roleOptions() {
            if (this.role && this.role.length) {
                return this.role.map(item => {
                    return {
                        value: item.id,
                        label: item.roleName
                    }
                })
            } else {
                 return []
            }
        },
        columns() {
            return [
                {
                    key: 'roleName',
                    title: '角色名称',
                    elementName: 'fieldCell',
                    props: { config: { type: 'multiSelect', options: this.roleOptions, clearable: true } }
                },
                // {
                //     key: 'personName',
                //     title: '人员',
                //     elementName: 'fieldCell',
                //     props: { config: { type: 'text', clearable: true } }
                // },
                { slot: 'operation', }
            ]
        },
    },
    created () {
    },
    mounted() {
        // this.$api.Role.query().then(res => {
        //     console.log("file: approve.vue:105  this.$api.Role.query  res:", res)
        // })
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.content {
    /deep/ .ivu-step {
        cursor: pointer
    }
    /deep/ .c-formItem {
        margin-bottom: 8px;
    }
}
</style>